{include file="common_top.html"}
{include file="common_head.html"}
<link rel="StyleSheet" type="text/css" href="/css/jquery.jcrop.css" />
<script type="text/javascript" src="/js/jquery.jcrop.js"></script>
{include file="common_center.html"}
<div class="app-wrapper">
	{include file="common_appheader.html"}
	<div class="app-body">
		<div class="content clearfix">
			<div class="action-member">
				{include file="member_common_navg.html"}
				<div class="detail page-member_base">
					<div class="item item-portrait" data-field="portrait">{assign var=field value="portrait"}{include file="member_base_item.html"}</div>
					<div class="item item-name" data-field="name">{assign var=field value="name"}{include file="member_base_item.html"}</div>
					<div class="item item-sex" data-field="sex">{assign var=field value="sex"}{include file="member_base_item.html"}</div>
					<div class="item item-birthday" data-field="birthday">{assign var=field value="birthday"}{include file="member_base_item.html"}</div>
					<div class="item item-blood" data-field="blood">{assign var=field value="blood"}{include file="member_base_item.html"}</div>
					<div class="item item-sign" data-field="sign">{assign var=field value="sign"}{include file="member_base_item.html"}</div>
					<div class="item item-mobile" data-field="mobile">{assign var=field value="mobile"}{include file="member_base_item.html"}</div>
					<div class="item item-email" data-field="email">{assign var=field value="email"}{include file="member_base_item.html"}</div>
				</div>
			</div>
		</div>
	</div>
	{include file="common_appfooter.html"}
</div>
<div class="dy-dialog">
	<div class="dy-dialog dialog-portrait clearfix">
		<div class="panel"><div class="info">将照片拖放到此处</div></div>
		<div class="message"></div>
		<div class="button">
			<input type="hidden" name="width" />
			<input type="hidden" name="height" />
			<input type="hidden" name="top" />
			<input type="hidden" name="left" />
			<input type="hidden" name="length" />
			<input type="hidden" name="url" />
			<input type="hidden" name="step" />
			<input type="button" class="dy-button blue ok" value="确定" />
			<input type="button" class="dy-button white close" value="取消" />
		</div>
	</div>
	<div class="dy-dialog dialog-name clearfix">
		<div class="name">姓名</div>
		<div class="panel">
			<div class="control">
				<label class="first_name"><input type="text" class="dy-text" name="first_name" data-dy_tips="#dy-tips-first_name" /><span id="dy-tips-first_name">姓氏</span></label>
				<label class="last_name"><input type="text" class="dy-text" name="last_name" data-dy_tips="#dy-tips-last_name" /><span id="dy-tips-last_name">名字</span></label>
			</div>
			<div class="privacy"><span class="dy-label">公开</span></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
	<div class="dy-dialog dialog-sex clearfix">
		<div class="name">性别</div>
		<div class="panel">
			<div class="control"><select name="sex" class="dy_select" data-type="choose" data-width="295" data-height="81">
				{foreach from=$sexs item=v key=k}<option value="{$k}">{$v|sex_format}</option>{/foreach}
			</select></div>
			<div class="privacy"><select name="sex_privacy" class="dy_select" data-type="choose" data-width="150" data-height="54">
				{foreach from=$privacys item=v key=k}<option value="{$k}">{$v|privacy_format}</option>{/foreach}
			</select></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
	<div class="dy-dialog dialog-birthday clearfix">
		<div class="name">生日</div>
		<div class="panel">
			<div class="control">
				<label class="birthday_year"><input type="text" name="birthday_year" class="dy-text" /></label>年
				<label class="birthday_month"><input type="text" name="birthday_month" class="dy-text" /></label>月
				<label class="birthday_day"><input type="text" name="birthday_day" class="dy-text" /></label>日
			</div>
			<div class="privacy"><select name="birthday_privacy" class="dy_select" data-type="choose" data-width="150" data-height="54">
				{foreach from=$privacys item=v key=k}<option value="{$k}">{$v|privacy_format}</option>{/foreach}
			</select></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
	<div class="dy-dialog dialog-blood clearfix">
		<div class="name">血型</div>
		<div class="panel">
			<div class="control"><select name="blood" class="dy_select" data-type="choose" data-width="295" data-height="108">
				{foreach from=$bloods item=v key=k}<option value="{$k}">{$v|blood_format}</option>{/foreach}
			</select></div>
			<div class="privacy"><select name="blood_privacy" class="dy_select" data-type="choose" data-width="150" data-height="54">
				{foreach from=$privacys item=v key=k}<option value="{$k}">{$v|privacy_format}</option>{/foreach}
			</select></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
	<div class="dy-dialog dialog-sign clearfix">
		<div class="name">个性宣言</div>
		<div class="panel">
			<div class="control"><input type="text" class="dy-text" name="sign" /></div>
			<div class="privacy"><span class="dy-label">公开</span></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
	<div class="dy-dialog dialog-mobile clearfix">
		<div class="name">手机</div>
		<div class="panel">
			<div class="control"><span class="dy-label"></span></div>
			<div class="privacy"><select name="mobile_privacy" class="dy_select" data-type="choose" data-width="150" data-height="54">
				{foreach from=$privacys item=v key=k}<option value="{$k}">{$v|privacy_format}</option>{/foreach}
			</select></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
	<div class="dy-dialog dialog-email clearfix">
		<div class="name">邮箱</div>
		<div class="panel">
			<div class="control"><span class="dy-label"></span></div>
			<div class="privacy"><select name="email_privacy" class="dy_select" data-type="choose" data-width="150" data-height="54">
				{foreach from=$privacys item=v key=k}<option value="{$k}">{$v|privacy_format}</option>{/foreach}
			</select></div>
			<div class="message"></div>
			<div class="button"><input type="button" class="dy-button blue ok" value="确定" /><input type="button" class="dy-button white close" value="取消" /></div>
		</div>
	</div>
</div>
<script type="text/javascript">
{literal}
var dialog = {
	"portrait":$(".dialog-portrait").html(),
	"name":$(".dialog-name").html(),
	"sex":$(".dialog-sex").html(),
	"birthday":$(".dialog-birthday").html(),
	"blood":$(".dialog-blood").html(),
	"sign":$(".dialog-sign").html(),
	"mobile":$(".dialog-mobile").html(),
	"email":$(".dialog-email").html()
};
$(".dy-dialog").remove();

function F_portrait(){
	return [
		{"selector":".dialog-portrait .panel", "type":"upload-image", "defval":""},
		{"selector":".dialog-portrait *[name=step]", "type":"hidden", "defval":""},
		{"selector":".dialog-portrait *[name=width]", "type":"hidden", "defval":""},
		{"selector":".dialog-portrait *[name=height]", "type":"hidden", "defval":""},
		{"selector":".dialog-portrait *[name=top]", "type":"hidden", "defval":""},
		{"selector":".dialog-portrait *[name=left]", "type":"hidden", "defval":""},
		{"selector":".dialog-portrait *[name=length]", "type":"hidden", "defval":""},
		{"selector":".dialog-portrait *[name=url]", "type":"hidden", "defval":""}
	];
}
function F_name(){
	return [
		{"selector":".dialog-name *[name=first_name]", "type":"text", "defval":".item-name ._first"},
		{"selector":".dialog-name *[name=last_name]", "type":"text", "defval":".item-name ._last"}
	];
}
function F_sex(){
	return [
		{"selector":".dialog-sex *[name=sex]", "type":"select", "defval":".item-sex .val"},
		{"selector":".dialog-sex *[name=sex_privacy]", "type":"select", "defval":".item-sex .privacy"}
	];
}
function F_birthday(){
	return [
		{"selector":".dialog-birthday *[name=birthday_year]", "type":"text", "defval":".item-birthday ._year"},
		{"selector":".dialog-birthday *[name=birthday_month]", "type":"text", "defval":".item-birthday ._month"},
		{"selector":".dialog-birthday *[name=birthday_day]", "type":"text", "defval":".item-birthday ._day"},
		{"selector":".dialog-birthday *[name=birthday_privacy]", "type":"select", "defval":".item-birthday .privacy"}
	];
}
function F_blood(){
	return [
		{"selector":".dialog-blood *[name=blood]", "type":"select", "defval":".item-blood .val"},
		{"selector":".dialog-blood *[name=blood_privacy]", "type":"select", "defval":".item-blood .privacy"}
	];
}
function F_sign(){
	return [{"selector":".dialog-sign *[name=sign]", "type":"text", "defval":".item-sign .val"}];
}
function F_mobile(){
	return [{"selector":".dialog-mobile *[name=mobile_privacy]", "type":"select", "defval":".item-mobile .privacy"}];
}
function F_email(){
	return [{"selector":".dialog-email *[name=email_privacy]", "type":"select", "defval":".item-email .privacy"}];
}

function F_DropType(obj, option){
	if(option == "stop"){
		
		obj.get(0).removeEventListener("drop", H_Drop, false);
		obj.unbind("dragleave", H_DragLeave);
		obj.unbind("dragover", H_DragOver);

		obj.get(0).addEventListener("drop", H_DropWait, false);
		obj.bind("dragleave", H_DropWait);
		obj.bind("dragover", H_DropWait);

	}else if(option == "start"){

		obj.get(0).removeEventListener("drop", H_DropWait, false);
		obj.unbind("dragleave", H_DropWait);
		obj.unbind("dragover", H_DropWait);

		obj.get(0).addEventListener("drop", H_Drop, false);
		obj.bind("dragleave", H_DragLeave);
		obj.bind("dragover", H_DragOver);

	}
}

function H_DropWait(event){
	event.stopPropagation();
	event.preventDefault();
}

function H_Drop(event){
	F_DropType($(this), "stop");

	event.stopPropagation();
	event.preventDefault();
	$(this).css({"border-color":"#DDDDDD", "background":"#FFFFFF"});

	var filelist = event.dataTransfer.files;
	if (!filelist || !filelist.length){
		var msg_obj = $(this).parent().find(".message");
		msg_obj.css("z-index", $.fn.dyMaxZindex("*:visible")).html("发生错误。").show(300);	
		$("body").one('mousedown', function(){msg_obj.hide(300);});
		F_DropType($(this), "start");
	}else if(filelist.length > 1){
		var msg_obj = $(this).parent().find(".message");
		msg_obj.css("z-index", $.fn.dyMaxZindex("*:visible")).html("抱歉，您拖动了多张照片。请只拖动您所需的照片。").show(300);	
		$("body").one('mousedown', function(){msg_obj.hide(300);});
		F_DropType($(this), "start");
	}else{
		var that = this, obj = $(this);
		obj.html("<div class='info'>请稍后，正在上传……<br /><br /><div class='loading'><div class='bar'></div></div></div>");
		$.fn.dyUploadFile(filelist[0], {
			dataType: "JSON",
			name: "portrait",
			url: "/index.php?a=member&m=basemodify&field=portrait&step=upload",
			onEvent: {success: function(result){
				if(result.state){
					$(that).html(result.message);
				}else{
					obj.html("<div class='info'>将照片拖放到此处</div>");
					var msg_obj = $(that).parent().find(".message");
					msg_obj.css("z-index", $.fn.dyMaxZindex("*:visible")).html(result.message).show(300);	
					$("body").one('mousedown', function(){msg_obj.hide(300);});
				}
				F_DropType($(that), "start");
			}, error: function(error){
				var msg_obj = $(this).parent().find(".message");
				msg_obj.css("z-index", $.fn.dyMaxZindex("*:visible")).html("AJAX请求错误[" + error + "]。").show(300);	
				$("body").one('mousedown', function(){msg_obj.hide(300);});
				F_DropType($(that), "start");
			}, progress: function(event){
				obj.find(".loading .bar").animate({"width": (event.loaded / filelist[0].size) * 100 + "%"}, 300);
			}}
		});
	}
}
function H_DragLeave(event){
	event.stopPropagation();
	event.preventDefault();
	$(this).css({"border-color":"#DDDDDD", "background":"#FFFFFF"});
}
function H_DragOver(event){
	event.stopPropagation();
	event.preventDefault();
	$(this).css({"border-color":"#4D90FE", "background":"#F6F6F6"});
}

function T_main(field, type){
	if(!type) return;
	
	var ctrls = eval("F_" + field + "();"), obj = null;

	for(var i = 0; i < ctrls.length; i++){
		obj = $(ctrls[i].selector);
		if(ctrls[i].type == "select"){
			obj.dySelect({name: obj.attr("name"), text: obj.data("text"), width: obj.data("width"), height: obj.data("height"), type: obj.data("type"), defval: $(ctrls[i].defval).data("val")});
		}else if(ctrls[i].type == "text"){
			obj.val($(ctrls[i].defval).data("val"));
			obj.dyText({tips: true});
		}else if(ctrls[i].type == "hidden"){
			obj.val($(ctrls[i].defval).data("val"));
		}else if(ctrls[i].type == "upload-image"){
			obj.get(0).addEventListener("drop", H_Drop, false);
			obj.bind("dragleave", H_DragLeave);
			obj.bind("dragover", H_DragOver);
		}
	}

	// 绑定ok
	$(".dialog-" + field + " .ok").click(function(){
		var change = false, data = {field:field};

		// 检查修改
		for(var i = 0; i < ctrls.length; i++){
			if(ctrls[i].type == "select" || ctrls[i].type == "text"){
				change = ($(ctrls[i].selector).val() != $(ctrls[i].defval).data("val")) || change;
				data[$(ctrls[i].selector).attr("name")] = $(ctrls[i].selector).val();
			}else if(ctrls[i].type == "hidden"){
				change = ($(ctrls[i].selector).val() != "") || change;
				data[$(ctrls[i].selector).attr("name")] = $(ctrls[i].selector).val();
			}
		}

		// 提交
		if(change){
			$.ajax({type: "POST", dataType: "JSON", url: "/index.php?a=member&m=basemodify", data: data, async: false, beforeSend: function(){
				$.fn.dyDialog({
					locate: {type: "window", x: "middle", y: "middle", origin: "mm"}, content: "<div class='dy-dialog dialog-loading clearfix'><img src='/images/loading.gif' /><div class='close hide'></div></div>",
					close: {className: "close", bgBtn: false}
				});
			}, complete: function(jqXHR, textStatus){
				$(".dialog-loading .close").click();
				if(textStatus != "success"){
					var msg_obj = $(".dialog-" + field + " .message");
					msg_obj.css("z-index", $.fn.dyMaxZindex("*:visible")).html("AJAX请求错误[" + textStatus + "]。").show(300);	
					$("body").one('mousedown', function(){msg_obj.hide(300);});
				}
			}, success: function(result){
				if(result.state){
					$(".item-" + field).html(result.message);
					$(".dialog-" + field + " .close").click();
				}else{
					var msg_obj = $(".dialog-" + field + " .message");
					msg_obj.css("z-index", $.fn.dyMaxZindex("*:visible")).html(result.message).show(300);
					$("body").one('mousedown', function(){msg_obj.hide(300);});
				}
			}});
		}else{
			$(".dialog-" + field + " .close").click();
		}
	});
}

$(function(){
	$(".page-member_base .item").click(function(){
		var field = $(this).data("field");
		var locate = (field == "portrait") ? {type: "window", x: "middle", y: "middle", origin: "mm"} : {type: "tag", x: "0", y: "0", origin: "lt", target:{object: $(this), origin: "lt"}};
		$.fn.dyDialog({
			locate: locate, 
			content: "<div class='dy-dialog dialog-" + field + " clearfix'>" + dialog[field] + "</div>",
			close: {className: "close", bgBtn: true}, 
			onEvent: {open: function(){T_main(field, 1);}, close: function(){T_main(field, 0);}}
		});
	});
});
{/literal}
</script>
{include file="common_bottom.html"}
